<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table>
        <tbody id="box">
            <!-- <tr>
            <td>张三</td>
            <td>19</td>
        </tr> -->
        </tbody>

    </table>
    <script>
        var obj = { name: '张三', age: 18 };

        // 拼字符串
        // +  号 单引号 双引号 
        var resStr = '这个人的姓名是:' + obj.name + ',年龄是' + obj.age;
        console.log(resStr);

        var resStr = '<tr><td>' + obj.name + '</td><td>' + obj.age + '</td></tr>';

        //  反引号--模板字符串
        // 可以在模板字符串 使用${变量}  插入变量的值
        // 
        var resStr2 = `<tr>
                            <td>`+ obj.name + `</td>
                            <td>`+ obj.age + `</td>
                        </tr>`;
        var resStr3 = `
                <tr>
                    <td>${obj.name}</td>
                    <td>${obj.age}</td>
                </tr>
        `;
        // document.write(resStr3) 

        // 给box加了个id， 
        // 下面就可以使用box这个变量
        // box.innerHTML 控制box内部的html代码 -给内部html代码赋值 为一个tr字符串
        box.innerHTML = resStr3;
    </script>

</body>

</html>